<template>
  <div>
    <div class="box">
      <Top>订单</Top>
      <Button :data="ordersData" @delOrder="delOrder"></Button>
    </div>
  </div>
</template>

<style scoped>
.box {
  background: #f5f5f5;
}
</style>

<script>
import Top from '../components/favoriteBox/favoriteTop.vue'
import Button from '../components/ordersBox/ordersButton.vue';
export default {
  created() {
    //商品数据 从本地获取商品数据
    this.ordersData = JSON.parse(localStorage.getItem('ordersData')) || [];
    // console.log(this.ordersData);
  },
  components: {
    Top,
    Button
  },
  data() {
    return {
      tabPosition: "left",
      ordersData: []
    };
  },
  methods: {
    delOrder(id) {
      //过滤删除对应的id
      this.ordersData = this.ordersData.filter(item => item.id !== id);
      //上传本地存储
      localStorage.setItem('ordersData', JSON.stringify(this.ordersData));
    }
  }
};
</script>